{% extends "layout.html" %}

{% block content %}
<div x-data="packageTracker" x-cloak>
    <!-- 通知消息 -->
    <div x-show="notification.show" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform scale-90"
         x-transition:enter-end="opacity-100 transform scale-100"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 transform scale-100"
         x-transition:leave-end="opacity-0 transform scale-90"
         :class="notification.type === 'success' ? 'bg-green-100 border-green-400 text-green-700' : 'bg-red-100 border-red-400 text-red-700'"
         class="border-l-4 p-4 mb-4 rounded shadow-sm">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg x-show="notification.type === 'success'" class="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <svg x-show="notification.type === 'error'" class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm" x-text="notification.message"></p>
            </div>
            <div class="ml-auto pl-3">
                <div class="-mx-1.5 -my-1.5">
                    <button @click="notification.show = false" class="inline-flex rounded-md p-1.5" :class="notification.type === 'success' ? 'text-green-500 hover:bg-green-100' : 'text-red-500 hover:bg-red-100'">
                        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航链接 -->
    <div class="border-b border-gray-200 mb-6">
        <nav class="flex -mb-px">
            <a href="{{ url_for('scan') }}" 
               class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                {{ _('扫描管理') }}
            </a>
            <a href="{{ url_for('batch') }}" 
               class="py-4 px-6 text-center border-b-2 border-blue-500 font-medium text-sm text-blue-600">
                {{ _('批次管理') }}
            </a>
            <a href="{{ url_for('report') }}" 
               class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                {{ _('报表管理') }}
            </a>
            <a href="{{ url_for('txconfig') }}" 
               class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                {{ _('通信配置') }}
            </a>
        </nav>
    </div>

    <!-- 批次管理 -->
    <div class="bg-white shadow rounded-lg p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-800">{{ _('批次管理') }}</h2>
            <div class="flex space-x-3">
                <div class="flex">
                    <input type="text" 
                           x-model="newBatchId" 
                           placeholder="{{ _('请输入新批次ID') }}"
                           class="block w-full px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                    <button @click="createBatch()" 
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        {{ _('创建新批次') }}
                    </button>
                </div>
                <button @click="deleteSelectedBatches()" 
                        class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                    {{ _('删除选中行') }}
                </button>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <input type="checkbox" @click="toggleAllBatches()" x-model="selectAllBatch" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('批次ID') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('创建时间') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('状态') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('包裹总数') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('完成率') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('操作') }}
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="(batch, index) in batches" :key="batch.batch_id">
                        <tr :class="{'bg-gray-50': index % 2 === 0}">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" x-model="selectedBatches" :value="batch.batch_id" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="batch.batch_id" class="text-sm font-medium text-gray-900"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="batch.create_time" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="batch.status" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="batch.total_packages" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="`${batch.completion}%`" :class="getCompletionClass(batch.completion)" class="text-sm"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button @click="viewBatchPackages(batch.batch_id)" 
                                        class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                    {{ _('查看包裹') }}
                                </button>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="batches.length === 0">
                        <td colspan="7" class="px-6 py-4 text-center text-sm text-gray-500">
                            {{ _('暂无数据') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 批次详情 -->
    <div x-show="selectedBatchForView" class="bg-white shadow rounded-lg p-6 mt-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-800">{{ _('批次详情') }}: <span x-text="selectedBatchForView"></span></h2>
            <button @click="selectedBatchForView = null" 
                    class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                {{ _('关闭详情') }}
            </button>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('包裹单号') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('批次') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('状态') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('首次扫描') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('最后扫描') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('操作员') }}
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="(pkg, index) in batchPackages" :key="pkg.package_id">
                        <tr :class="{'bg-gray-50': index % 2 === 0}">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.package_id" class="text-sm font-medium text-gray-900"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.batch_id" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.status" :class="pkg.status === '已扫描' ? 'status-scanned' : 'status-unscanned'" class="text-sm"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.first_scan || '-'" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.last_scan || '-'" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.operator || '-'" class="text-sm text-gray-500"></span>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="batchPackages.length === 0">
                        <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">
                            {{ _('暂无数据') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 添加 Socket.IO 客户端库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>

<!-- 添加自定义JavaScript文件 -->
<script src="{{ url_for('static', filename='js/websocket.js') }}"></script>
<script src="{{ url_for('static', filename='js/notification.js') }}"></script>
<script src="{{ url_for('static', filename='js/sound.js') }}"></script>
<script src="{{ url_for('static', filename='js/packageTracker.js') }}"></script>
{% endblock %}
